<!DOCTYPE html>
<html lang="zh">
<!-- 
    元数据内容，网页区域不可见。
        不给用户用，而是给浏览器、搜索引擎等使用。
    一般来讲，商用网站head部分会比较复杂。
        给搜索引擎用的一部分内容。
        做设备相关的一些处理。
        做页面加载的一些准备。
    评判网站的依据：
        信息全面、布局美观。对用户友好。
        利于搜索、收录等。对搜索引擎（机器）友好。
-->
<head>
    <!-- 编码方式，一般用utf-8方式 -->
    <meta charset="UTF-8">
    <!-- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> -->
    <!-- 网页的标题，可以给用户看，也可以给搜索引擎用。也可以脚本控制。 -->
    <title>head部分元素解析</title>
    <!-- 
        meta 元，facebook改名叫meta，元宇宙。
        网页的元信息，关于网页的信息。

        1. meta name="" content=""，以名-值对的方式给文档提供元数据
            keywords 网页的关键词。
            description 网页描述。
            author
            generator
            theme-color
            viewport
        2. meta http-equive="" content="" 给文档指定一个编译指示指令。
            X-UA-Compatible  兼容模式用浏览器那个内核来编译。
            Content-Type     内容类型，指定浏览器编译网页的编码方式。
            refresh
            Cache-Control
        3. 第三方厂商提供的定制的方法。 例如QQ网站上的baidu-site-verification。
            例如使用百度提供的网站计数工具，在计数工具的说明文档里告诉我们如何使用。
            <meta name="shenma-site-verification" content="1237e4d02a3d8d73e96cbd97b699e9c3_1504254750">
            <meta name="baidu-site-verification" content="OfJHAPXD7i" />

            
     -->
     <meta name="keywords" content="关键字,关键字2">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <!-- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> -->
     <!-- <meta http-equiv="refresh" content="2; url=http://zptc.edu.cn"> -->
     <!-- 
        style和link
        style 本网页用到的独有的样式，页内CSS
            style属性 type, 嵌入的文本是做什么用的。
        link  页面里用到的网站整体样式，外部CSS
        ! https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link
            rel 属性，链接进来的文件作用。
            ! https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
            href属性，链接进来的文件地址。
            <link rel="stylesheet" href="css/00.css"> 链接css/00.css这个文件进来，做样式表。
            <link rel="icon" href="https://developer.mozilla.org/favicon-48x48.cbbd161b.png">
            <link rel="shortcut icon" href="https://mat1.gtimg.com/qqcdn/qqindex2021/favicon.ico" />
            <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
            <link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.6803c6f0.png">
            
            每当站点引用跨域域上的资源时，都应在 <head> 元素中放置 dns-prefetch提示。 腾讯手机版，PC版没有。
            <link rel="dns-prefetch" href="https://fonts.googleapis.com/"> 
            提供可选的样式表。
            <link rel="alternate stylesheet" href="css/001.css"  title="Fancy">
            指定media属性，给不同的设备(打印机)提供不同的样式表
            <link rel="stylesheet" href="css/002.css" media="print">

            <link>也加入了一些新的有意思的性能和安全特性。举例如下：
            <link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
      -->
    <style type="text/css">
        p{
            font-size: 2em;
            color: #444;
        }
    </style>
    
    <link rel="stylesheet" href="css/00.css">
    <link rel="shortcut icon" href="img/favicon-48x48.cbbd161b.png">
    <link rel="alternate stylesheet" href="css/001.css"  title="Fancy">
    <link rel="stylesheet" href="css/002.css" media="print">
    <!-- 
        base 提供网页的基准链接地址。
        一般不用，太粗暴，给本页面所有的链接地址统一修改。
        <base href="css/">
     -->
   <!-- 
    script 跟style、link类似，可以由两种方式加载JS.、
    加载过多，容易造成页面阻塞。
    ! 只放本页面加载所必须的脚本。
    -->
    <script>
        document.write("hello");
    </script>
    <script src="js/00.js"></script>
</head>
<!-- 网页内容，网页区域可见。 -->
<body>

    <p>段落里协议依据各打发斯蒂芬</p>
    <a href="http://www.baidu.com">百度</a>
    <script>
        // document.title="利于JS设置的网页标题。";
    </script>
</body>
</html>